<template>
  <div class="basic-dict">
    <template v-if="type === 'select'">
      <el-select v-model="value" class="w-full" :disabled="disabled">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </template>

    <template v-else-if="type === 'radio'">
      <el-radio-group v-model="value" class="w-full" :disabled="disabled">
        <el-radio v-for="item in options" :key="item.value" :label="item.value">
          {{ item.label }}
        </el-radio>
      </el-radio-group>
    </template>
  </div>
</template>

<script setup lang="ts">
interface IEmit {
  (event: 'update:modelValue', value: string | number | undefined): void
}

interface IProps {
  modelValue: string | number | undefined
  options: LabelValue<string | number>[]
  type?: 'radio' | 'select'
  disabled?: boolean
}

const emit = defineEmits<IEmit>()
const props = withDefaults(defineProps<IProps>(), {
  type: 'select',
  disabled: false
})

const value = useVModel(props, 'modelValue', emit)
</script>
